<template>
  <div class="home">
    <h1 style="text-align:center;background-color: #1FA1F9;color: white;margin-top: 0;">{{unittypename[unittype-1]}}{{ msg }}</h1>
    <Office v-if="unittype === 1" ref="office" />
    <Hospital v-if="unittype === 2" ref="hospital" />
    <el-row style="height: 60px;">
      <el-col :span="10">巡查人员：</el-col>
      <el-col :span="13">
        <el-input type="textarea" :rows="2" v-model="questuser" placeholder="巡查人员"></el-input>
      </el-col>
    </el-row>
    <el-row style="height: 70px;">&nbsp;</el-row>
    <el-row style="position: fixed; bottom: 20px; margin: 0 0 -20px 0; width: 100%;" v-show="showBtn">
      <el-button-group style="width:100%;">
        <el-button type="primary" style="width: 50%; height: 65px; font-size: 1.5em;" @click="CommitAnswers">提交</el-button>
        <el-button type="warning" style="width: 50%; height: 65px; font-size: 1.5em;" @click="backChoice">返回</el-button>
      </el-button-group>
    </el-row>
  </div>
</template>

<script>
import Office from '@/components/Office'
import Hospital from '@/components/Hospital'
import { doCommitQuestnaire, getQuestnaire } from '@/api/questions'

export default {
  name: 'Home',
  components: {
    Office,
    Hospital
  },
  data () {
    return {
      msg: '控烟巡查记录',
      unittypename: ['党政机关', '医疗卫生机构'],
      unittype: 1,
      unitgroup: 1,
      unit: '1-01',
      questuser: '',
      clientHeight: document.documentElement.clientHeight,
      showBtn: true, // 控制按钮盒子显示隐藏
      previewPath: '', // 预览路径
      previewVisible: false // 预览弹框
    }
  },
  created () {
    var params = this.$route.params
    this.unittype = params.typeid
    this.unitgroup = params.groupid
    this.unit = params.unitid

    this.resetDefault()
  },
  mounted () {
    window.onresize = () => {
      if (this.clientHeight > document.documentElement.clientHeight) {
        this.showBtn = false
      } else {
        this.showBtn = true
      }
    }
  },
  methods: {
    resetDefault () {
      var _that = this
      getQuestnaire(this.unittype, this.unitgroup, this.unit).then((res) => {
        var data = res.data
        var cnt = null
        if (data.errno === 0 && data.data) {
          cnt = data.data.answerscontent
          _that.questuser = data.data.questuser
        }

        if (_that.unittype === 1) {
          this.$refs.office.resetAnswers(cnt)
        } else {
          this.$refs.hospital.resetAnswers(cnt)
        }
      })
    },
    CommitAnswers () {
      if (this.questuser == null || this.questuser.trim() === '') {
        this.$message.error('提交失败，请填写巡查人员信息')
        return
      }

      var answers = ''
      if (this.unittype === 1) {
        answers = this.$refs.office.getAllAnswers()
      } else if (this.unittype === 2) {
        answers = this.$refs.hospital.getAllAnswers()
      }

      var _that = this
      doCommitQuestnaire(this.unittype, this.unitgroup, this.unit, answers, this.questuser).then((res) => {
        var data = res.data
        if (data.errno === 0) {
          _that.$message.success('提交成功')
          this.$router.push({path: '/choice'})
        } else {
          _that.$message.error('提交失败，请稍后再试')
        }
      }).catch(err => {
        _that.$message.error('提交失败，请稍后再试')
        console.log(err)
      })
    },
    backChoice () {
      var unchanged = true
      if (this.unittype === 1) {
        unchanged = this.$refs.office.answerUnChanged()
      } else if (this.unittype === 2) {
        unchanged = this.$refs.hospital.answerUnChanged()
      }

      if (!unchanged) {
        this.$confirm('巡查记录已更新, 是否放弃记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({path: '/choice'})
        }).catch(() => {
        })
      } else {
        this.$router.push({path: '/choice'})
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/css/global.css";
.home {
  font-size: 1.4em;
  text-align: left;
  background-color: #F8F6F9;
}
</style>
<style>
  .el-message-box {
    width: 350px;
  }
</style>
